<template>
  <div>
    <el-button type="text" icon="el-icon-back" size="mini" @click="back">返回</el-button>
    <div class="tip">规则信息详情</div>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="23">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>规则信息</span>
          </div>
          <div>
            <el-row :gutter="300">
              <el-col :span="10">
                <el-form ref="form" :model="ruleData" label-width="80px" disabled>
                  <el-form-item label="规则名称">
                    <el-input v-model="ruleData.name"></el-input>
                  </el-form-item>
                  <el-form-item label="规则描述">
                    <el-input v-model="ruleData.describe"></el-input>
                  </el-form-item>
                  <el-form-item label="创建人">
                    {{ ruleData.creator }}
                  </el-form-item>
                  <el-form-item label="创建时间">
                    <el-date-picker type="date" v-model="ruleData.createDate" disabled></el-date-picker>
                  </el-form-item>
                  <el-form-item label="使用成员">
                    <span v-for="member in ruleData.member" class="text item">
                      {{ member.name }}&nbsp;&nbsp;
                    </span>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="10">
                <el-card class="box-card" style="height: 300px">
                  <span v-for="o in ruleData.rules" class="text item">
                      {{ o.case }}<p />
                  </span>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="interspaceH"></div>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="23">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>规则数据</span>
          </div>
          <div id="censorshipData">
            <el-row :gutter="40">
              <el-col :span="6">
                <el-card class="box-card" style="height: 150px">
                  <span style="font-size: 40px">22</span>
                  <p />
                  <span style="size: A3">总触发规则次数</span>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="box-card" style="height: 150px">
                  <span style="font-size: 40px">2</span>
                  <p />
                  <span style="size: A3">今日触发规则次数</span>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="box-card" style="height: 150px">
                  <span style="font-size: 40px">15</span>
                  <p />
                  <span style="size: A3">本周触发规则次数</span>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="box-card" style="height: 150px">
                  <span style="font-size: 40px">22</span>
                  <p />
                  <span style="size: A3">本月触发规则次数</span>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "censorship_view",
    props:{
      ruleData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data(){
      return{

      }
    },
    methods: {
      back(){
        this.$emit("currentHandle", {'currentPanel':'list'})
      },
    }
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  #censorshipData{
    text-align: center;
  }

</style>
